<template>
  <v-form :fields="fields" :model="state.formIn" />
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  const fields = [
    {
      subassembly: 'ElInput',
      label: '名称',
      prop: 'name',
      span: 8,
    },
    {
      subassembly: 'ElInput',
      label: '年龄',
      prop: 'age',
      span: 8,
    },
    {
      subassembly: 'ElInput',
      label: '地点',
      prop: 'birthday',
      span: 8,
    },
    {
      subassembly: 'VSelect',
      label: '地区',
      prop: 'locations.nation',
      subOptions: {
        options: [
          { label: 'Zone one', value: 'shanghai' },
          { label: 'Zone two', value: 'beijing' },
        ],
      },
      span: 12,
    },
  ]

  const state = ref({
    formIn: {
      name: '',
      age: '',
      locations: {
        nation: 'nation',
      },
    },
  })
</script>
